<template>
  <el-form ref="form" :inline="true" :model="form" label-width="80px">
    <div style="font-size: 30px">课程基本信息添加</div>
    <div style="height: 50px"></div>
    <div v-for="(item, index) in form.dynamicItem" :key="index">
      <el-col :span="1">
        第{{index+1}}章
      </el-col>
      <el-form-item
        :prop="'dynamicItem.' + index-1 + '.name'"
        :rules="{
            required: true, message: '章节不能为空', trigger: 'blur'
        }"
      >
        <el-input v-model="item.name" style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="index+1 == form.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
        <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
      </el-form-item>
    </div>
    <el-button @click="submit" type="primary">确认提交</el-button>
  </el-form>
</template>

<script>
import router from "../../router";

export default {
  data(){
    return{
      form: {
        course: {},
        dynamicItem: [
          {
            name: "",
          }
        ]
      },

    }
  },
  created(){
    this.form.course=this.$store.state.addcourse
  },

  methods:{
    addItem() {
      this.form.dynamicItem.push({
        name: "",

      });
    },
    sure(form) {
      console.log(this.form.dynamicItem.length, "length");
      this.$refs[form].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
      console.log(this.form.dynamicItem, "删除");
    },
    submit(){
      console.log(this.form)
      console.log(this.form.course)
      this.axios.post(this.baseUrl+"course/addchapter",this.form)
          .then(res =>{
            this.$store.commit('addCoursesection', res.data.data);
            console.log(res.data.data)
            router.push("/teacher/teacher_course/teacher_coursepublishsection")
        });
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
